<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1
			{
				width: 300px;
				height: 300px;
				background-color: aqua;
				font-size: 200px;
				margin: 0 auto;
				position: absolute;
				
			}
			body{
				width: 2000px;
				height: 2000px;
			}
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				var timer;
				var num=0;
				var btn01=document.getElementById("btn01");
				var btn02=document.getElementById("btn02");
				var box1=document.getElementById("box1");
				btn01.onclick=function()
				{
					clearInterval(timer);
					timer=setInterval(function(){
						
						var arr=["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"];
						box1.innerHTML=arr[num];
						num++;
						num%=arr.length;
						btn02.onclick=function()
						{
							clearInterval(timer);
						}
					},10)
				}
				box1.onmousedown=function()
				{
					var ox=event.clientX-box1.offsetLeft;
					var oy=event.clientY-box1.offsetTop;
					document.onmousemove=function(event)
					{
						
						var x=event.clientX-ox;
						var y=event.clientY-oy;
						box1.style.left=x+"px";
						box1.style.top=y+"px";
						
					}
					document.onmouseup=function()
					{
						document.onmousemove=null;
						document.onmouseup=null;
					}
			}
			}
		</script>
	</head>
	<body>
		<div id="box1"></div>
		<br />
		<button id="btn01">开始</button>
		<button id="btn02">停止</button>
	</body>
</html>